<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <div id="app">
        <button @click="plus">plus</button>
        <div>noComputed: {{noComputedCount}}</div>
    </div>
</head>
<body>
    

   <script type="module">
       import {createApp, computed, reactive } from './node_modules/vue/dist/vue.esm-browser.js'
       let todos = [
           {
               item:"读书",
               isCompleted: true
           },
           {
               item:"写字",
               isCompleted: true
           },
           {
               item:"画画",
               isCompleted: false
           },
       ]
       createApp({
           setup() {
            let todo = reactive(todos)

            let noComputedCount = computed(()=> todo.filter(item=>!item.isCompleted).length)
            console.log(noComputedCount)
            return {
                noComputedCount,
                plus:()=>{
                    todo.push({
                        item:"吃饭",
                        isCompleted: false
                    }) 
                }

            }

           }
       }).mount("#app")

   </script> 
</body>
</html>